<div id="pm_settings">
    <div class="settings settingsLabels-container" id="labelContainer">
        <div class="row">
            <div class="setting pm_form full">
                <header-block class="settingsLabels-header-label">
                    <h2
                        class="settingsLabels-title-label"
                        translate
                        translate-context="Title">Folders / Labels</h2>
                </header-block>

                <p>
                    <button type="button" class="pm_button primary labelsState-btn-add-folder" ng-click="createFolder()" translate-context="Action" translate>Add folder</button>
                    <button type="button" class="pm_button primary labelsState-btn-add" ng-click="createLabel()" translate-context="Action" translate>Add label</button>
                    <button
                        type="button"
                        class="pm_button labelsState-btn-sort"
                        ng-click="sortLabels()"
                        pt-tooltip-translate-context="Action"
                        pt-tooltip-translate="Sort alphabetically"
                        pt-placement="top"
                        translate-context="Action"
                        translate>Sort</button>
                </p>
                <p class="alert alert-info" translate-context="Label information" translate>Multiple Labels can be applied to a single message, but a message can only be in a single Folder.</p>

                <p
                    class="help-dnd"
                    ng-if="labels.length"
                    translate-context="Label information"
                    translate>You can drag and drop to rearrange the order of Labels/Folders.</p>
                <p
                    class="alert alert-info labelsState-msg-info"
                    ng-show="!labels.length"
                    translate-context="Info"
                    translate>You have no labels.</p>

                <ul ng-if="labels.length" class="labelsState-list pm_sort-container"
                    data-as-sortable="labelsDragControlListeners"
                    is-disabled="labels.length === 1"
                    ng-class="{ 'as-sortable-disabled': labels.length === 1 }"
                    data-ng-model="labels">
                    <li
                        class="labelsState-item pm_sort-item"
                        ng-repeat="label in labels track by label.ID"
                        data-color="{{label.Color}}"
                        data-as-sortable-item>
                        <div class="pm_sort-item-content" as-sortable-item-handle>
                            <div>
                                <i class="labelsState-item-icon fa" ng-class="{ 'fa-folder': label.Exclusive, 'fa-tag': !label.Exclusive }" ng-style="{ color: label.Color }"></i>
                                <span class="label-pm labelsState-item-name ellipsis">{{ label.Name }}</span>
                            </div>
                            <div ng-if="label.Exclusive" pt-tooltip-translate-context="Label" pt-tooltip-translate="Enable/disable desktop and mobile notifications">
                                <label for="{{ label.ID }}" class="labelsState-toggle-label" translate-context="Label" translate>Notification</label>
                                <toggle data-status="label.notify" class="small" data-name="changeNotifyLabel" data-id="{{ label.ID }}"></toggle>
                            </div>
                            <div>
                                <button
                                    class="pm_button link labelsState-btn-edit"
                                    ng-click="editLabel(label)"
                                    translate-context="Action"
                                    translate>Edit</button>
                                <button
                                    class="pm_button link text-red labelsState-btn-delete"
                                    ng-click="deleteLabel(label)"
                                    translate-context="Action"
                                    translate>Delete</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
